﻿@{
    ViewBag.Title = "Index";
}

@section style{
    <link href="~/Content/dropload.css" rel="stylesheet" />
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(0,0,0,0);
            -webkit-text-size-adjust: none;
        }

        html {
            font-size: 10px;
        }

        body {
            background-color: #f5f5f5;
            font-size: 1.2em;
        }

        .outer {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            display: -webkit-box;
            display: -webkit-flex;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-direction: column;
            -webkit-box-orient: vertical;
            box-orient: vertical;
            -webkit-flex-direction: column;
            flex-direction: column;
        }

        .header {
            position: relative;
            height: 44px;
            line-height: 44px;
            border-bottom: 1px solid #ccc;
            background-color: #eee;
        }

            .header h1 {
                text-align: center;
                font-size: 2rem;
                font-weight: normal;
            }

            .header .btn {
                position: absolute;
                right: 0;
                top: 0;
                width: 4em;
                height: 100%;
                text-align: center;
                color: #06c;
                font-size: 1.4rem;
                background-color: #ccc;
            }

                .header .btn:active {
                    background-color: #aaa;
                    color: #fff;
                }

        .inner {
            -webkit-box-flex: 1;
            -webkit-flex: 1;
            -ms-flex: 1;
            flex: 1;
            background-color: #fff;
            overflow-y: scroll;
            -webkit-overflow-scrolling: touch;
        }

            .inner .item {
                display: -webkit-box;
                display: -webkit-flex;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-align: center;
                -webkit-box-align: center;
                box-align: center;
                -webkit-align-items: center;
                align-items: center;
                padding: 3.125%;
                border-bottom: 1px solid #ddd;
                color: #333;
                text-decoration: none;
            }

                .inner .item img {
                    display: block;
                    width: 40px;
                    height: 40px;
                    border: 1px solid #ddd;
                }

                .inner .item h3 {
                    display: block;
                    -webkit-box-flex: 1;
                    -webkit-flex: 1;
                    -ms-flex: 1;
                    flex: 1;
                    width: 100%;
                    max-height: 40px;
                    overflow: hidden;
                    line-height: 20px;
                    margin: 0 10px;
                    font-size: 1.2rem;
                }

                .inner .item .date {
                    display: block;
                    height: 20px;
                    line-height: 20px;
                    color: #999;
                }

        .opacity {
            -webkit-animation: opacity 0.3s linear;
            animation: opacity 0.3s linear;
        }
    </style>
}

<div class="outer">
    <div class="header">
        <h1>头部</h1>
        <a href="javascript:;" class="btn lock">锁定</a>
        <div class="footer" style="position:absolute;left:0;top:0;background-color:#fff;">
            <a href=""></a>
            <a href="#"></a>
        </div>
    </div>
    <div class="inner">
        <div class="lists">
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>1文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>2文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>3文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>4文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>5文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>6文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>7文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>8文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>9文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
            <a class="item" href="#">
                <img src="http://d6.yihaodianimg.com/N02/M0B/81/5A/CgQCsVMhX_mAAvXsAAJDE3K2zh485900_80x80.jpg" alt="">
                <h3>10文字描述文字描述文字描述文字描述文字描述</h3>
                <span class="date">2014-14-14</span>
            </a>
        </div>
    </div>
</div>

@section scripts{
    <script src="~/Scripts/dropload.js"></script>
    <script type="text/javascript">
        $(function () {
            window.times = 0;
            // 按钮操作
            $('.header .btn').on('click', function () {
                var $this = $(this);
                if (!!$this.hasClass('lock')) {
                    $this.attr('class', 'btn unlock');
                    $this.text('解锁');
                    // 锁定
                    dropload.lock();
                    $('.dropload-down').hide();
                } else {
                    $this.attr('class', 'btn lock');
                    $this.text('锁定');
                    // 解锁
                    dropload.unlock();
                    $('.dropload-down').show();
                }
            });

            // dropload
            var dropload = $('.inner').dropload({
                domUp: {
                    domClass: 'dropload-up',
                    domRefresh: '<div class="dropload-refresh">↓下拉刷新</div>',
                    domUpdate: '<div class="dropload-update">↑释放更新</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>'
                },
                domDown: {
                    domClass: 'dropload-down',
                    domRefresh: '<div class="dropload-refresh">↑上拉加载更多</div>',
                    domLoad: '<div class="dropload-load"><span class="loading"></span>加载中...</div>',
                    domNoData: '<div class="dropload-noData">暂无数据</div>'
                },
                loadUpFn: function (me) {
                    $.ajax({
                        type: 'GET',
                        url: '/json/update.json',
                        dataType: 'json',
                        success: function (data) {
                            var result = '';
                            for (var i = 0; i < data.lists.length; i++) {
                                result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                                + '<img src="' + data.lists[i].pic + '" alt="">'
                                + '<h3>' + data.lists[i].title + '</h3>'
                                + '<span class="date">' + data.lists[i].date + '</span>'
                                + '</a>';
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function () {
                                $('.lists').html(result);
                                // 每次数据加载完，必须重置
                                dropload.resetload();
                            }, 1000);
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            dropload.resetload();
                        }
                    });
                },
                loadDownFn: function (me) {
                    $.ajax({
                        type: 'GET',
                        url: '/json/more.json',
                        dataType: 'json',
                        success: function (data) {
                            var result = '';
                            for (var i = 0; i < data.lists.length; i++) {
                                result += '<a class="item opacity" href="' + data.lists[i].link + '">'
                                + '<img src="' + data.lists[i].pic + '" alt="">'
                                + '<h3>' + data.lists[i].title + '</h3>'
                                + '<span class="date">' + data.lists[i].date + '</span>'
                                + '</a>';
                            }
                            // 为了测试，延迟1秒加载
                            setTimeout(function () {
                                $('.lists').append(result);
                                // 每次数据加载完，必须重置
                                dropload.resetload();
                            }, 1000);
                        },
                        error: function (xhr, type) {
                            alert('Ajax error!');
                            // 即使加载出错，也得重置
                            dropload.resetload();
                        }
                    });
                }
            });
        });
    </script>
}
